body {
	background:#f2d455;
	overflow:hidden;
}
#mask {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	line-height:100%;
	z-index:100;
	background:#f2d455;
	color:#fff;
	text-align:center;
}
.spinner {
	position:absolute;
	top:50%;
	left:50%;
	width:.2rem;
	height:.2rem;
	margin-top:-1rem;
	margin-left:-1rem;
	transform:scale(5);
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: .06rem;
  height: .06rem;
  background-color: #333;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
	-moz-animation: bouncedelay 1.2s infinite ease-in-out;
	-o-animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	-moz-animation-mode: both;
	-o-animation-mode: both;
}
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
}
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
	-moz-transform: rotateZ(90deg);
	-o-transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
	-moz-animation-delay: -1.1s;
	-o-animation-delay: -1.1s;
}
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
	-moz-animation-delay: -1.0s;
	-o-animation-delay: -1.0s;
}
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
	-moz-animation-delay: -0.9s;
	-o-animation-delay: -0.9s;
}
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
	-moz-animation-delay: -0.8s;
	-o-animation-delay: -0.8s;
}
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
	-moz-animation-delay: -0.7s;
	-o-animation-delay: -0.7s;
}
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
	-moz-animation-delay: -0.6s;
	-o-animation-delay: -0.6s;
}
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
	-moz-animation-delay: -0.5s;
	-o-animation-delay: -0.5s;
}
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
	-moz-animation-delay: -0.4s;
	-o-animation-delay: -0.4s;
}
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
	-moz-animation-delay: -0.3s;
	-o-animation-delay: -0.3s;
}
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
	-moz-animation-delay: -0.2s;
	-o-animation-delay: -0.2s;
}
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
	-moz-animation-delay: -0.1s;
	-o-animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
	-moz-transform: scale(0.0);
	-o-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
  }
}
.site-nav {
	position:fixed;
	top:0;
	left:0;
	z-index:50;
	width:100%;
	background:#2b95b1
}
.nav-wrapper {
	position:relative;
	max-width:1360px;
	min-width:980px;
	margin:0 auto;
	padding:.12rem 0
}
.site-star {
	float:left;
	width:3.03rem;
	height:.71rem;
	background-image:url('../images/p_02.png')
}
.nav-menu {
	float:right;
	padding-top:.25rem
}
.nav-menu li {
	float:left;
}
.nav-menu li:nth-child(1) {
	@include delay(.2s)
}
.nav-menu li:nth-child(2) {
	@include delay(.15s)
}
.nav-menu li:nth-child(3) {
	@include delay(.1s)
}
.nav-menu li:nth-child(4) {
	@include delay(.05s)
}
.nav-menu li a {
	position:relative;
	padding:.05rem .32rem;
	font-size:.2rem;
	color:#fff;
	border-radius:.14rem
}
.nav-menu li.active a {
	background:#e9b92a
}
.nav-menu li.active a::before {
	content:'';
	position:absolute;
	top:-.01rem;
	left:-.09rem;
	width:.35rem;
	height:.32rem;
	background-image:url('../images/p_star.png')
}
#signup-entrance {
	position:fixed;
	right:0;
	top:50%;
	z-index:55;
	margin-top:-.78rem;
	padding:.34rem .2rem .14rem .3rem;
	background:#45c4e6;
	border-top-left-radius:.3rem;
	border-bottom-left-radius:.3rem;
}
#signup-entrance span {
	display:block;
	height:1.08rem;
	width:.2rem;
	font-size:.2rem;
	color:#fff;
}
#site-body {
	position:relative;
	min-width:1200px;
	max-width:1920px;
	margin:0 auto;
	height:400%;
	top:0;
	transition:top .8s ease-in-out;
	-webkit-transition:top .8s ease-in-out;
	-moz-transition:top .8s ease-in-out;
	-o-transition:top .8s ease-in-out;
}
section {
	position:relative;
	height:25%
}
.bg {
	position:absolute;
	left:0;
	bottom:0;
	z-index:2;
	width:19.2rem;
	height:3.84rem;
	background-image:url('../images/bg.png')
}
.center {
	position:absolute;
	left:4.3rem;
	bottom:4.17rem;
	z-index:4;
	width:10.27rem;
	height:3.1rem;
	background-image:url('../images/center.png')
}
.btn {
	position:absolute;
	left:6.32rem;
	bottom:1.9rem;
	z-index:20;
	width:16.35%;
	height:.76rem;
	line-height:.76rem;
	font-size:.36rem;
	color:#2b95b1;
	background-color:#fff;
	border:solid 1px #fff;
	text-align:center;
	border-radius:4rem;
	@include delay(.25s)
}
.btn#signup {
	position:absolute;
	left:10.01rem;
	color:#fff;
	background-color:transparent;
	@include delay(.35s)
}
.btn em {
	display:inline-block;
	width:.41rem;
	height:.42rem;
	margin-right:.12rem;
	position:relative;
	top:.1rem;
	background-image:url('../images/p_05.png')
}
#webchat {
	position:absolute;
	right:5.87rem;
	bottom:.59rem;
	z-index:20;
	width:.39rem;
	height:.3rem;
	background-image:url('../images/p_06.png');
	@include delay(.55s)
}
#weibo {
	position:absolute;
	right:5.15rem;
	bottom:.61rem;
	z-index:20;
	width:.31rem;
	height:.31rem;
	background-image:url('../images/p_07.png');
	@include delay(.65s)
}
.copyright {
	position:absolute;
	left:0;
	bottom:.6rem;
	z-index:20;
	width:100%;
	font-size:.16rem;
	color:#fff;
	text-align:center;;
	@include delay(.45s)
}
.city01 {
	position:absolute;
	left:1.76rem;
	bottom:.45rem;
	z-index:10;
	width:.9rem;
	height:3.37rem;
	background-image:url('../images/city_01.png');
	@include delay(.05s)
}
.city02 {
	position:absolute;
	left:2.63rem;
	bottom:.59rem;
	z-index:9;
	width:.67rem;
	height:2.43rem;
	background-image:url('../images/city_02.png');
	@include delay(.15s)
}
.city03 {
	position:absolute;
	left:3.33rem;
	bottom:.81rem;
	z-index:9;
	width:.47rem;
	height:4rem;
	background-image:url('../images/city_03.png');
	@include delay(.25s)
}
.city04 {
	position:absolute;
	left:3.94rem;
	bottom:1.5rem;
	z-index:9;
	width:.66rem;
	height:1.66rem;
	background-image:url('../images/city_04.png');
	@include delay(.3s)
}
.city05 {
	position:absolute;
	right:1.8rem;
	bottom:1.5rem;
	z-index:3;
	width:2.56rem;
	height:2.27rem;
	background-image:url('../images/city_05.png');
	@include delay(.2s)
}
.city07 {
	position:absolute;
	right:2.7rem;
	bottom:1.88rem;
	z-index:5;
	width:1.86rem;
	height:1.51rem;
	background-image:url('../images/city_07.png');
	@include delay(.25s)
}
.city08 {
	position:absolute;
	right:2.01rem;
	bottom:1.44rem;
	z-index:5;
	width:2.33rem;
	height:2.01rem;
	background-image:url('../images/city_08.png');
	@include delay(.3s)
}
.city10 {
	position:absolute;
	right:1.84rem;
	bottom:.7rem;
	z-index:6;
	width:.77rem;
	height:2.39rem;
	background-image:url('../images/city_10.png');
	@include delay(.15s)
}
.city11 {
	position:absolute;
	right:.78rem;
	bottom:.79rem;
	z-index:6;
	width:1.05rem;
	height:3.34rem;
	background-image:url('../images/city_11.png');
	@include delay(.05s)
}
.cloud01, .cloud02 {
	position:absolute;
	left:2.32rem;
	bottom:1.61rem;
	z-index:9;
	width:.92rem;
	height:.49rem;
	background-image:url('../images/cloud_01.png');
	@include delay(.1s)
}
.cloud02 {
	left:3.3rem;
	bottom:.71rem;
	z-index:11
}
.cloud03, .cloud04, .cloud05, .cloud06 {
	position:absolute;
	width:1.82rem;
	height:.96rem;
	background-image:url('../images/cloud_02.png')
}
.cloud03 {
	left:1.85rem;
	bottom:.34rem;
	z-index:10;;
	@include delay(.2s)
}
.cloud04 {
	left:3.4rem;
	bottom:1.04rem;
	z-index:11;;
	@include delay(.35s)
}
.cloud05 {
	right:.79rem;
	bottom:.35rem;
	z-index:10;
	@include delay(.1s)
}
.cloud06 {
	right:3.9rem;
	bottom:1.3rem;
	z-index:10;
	@include delay(.35s)
}
.pop {
	position:absolute;
	z-index:12;
	width:.8rem;
	height:1.08rem;
	line-height:.9rem;
	background-image:url('../images/pop.png');
	font-size:.3rem;
	color:#fff;
	text-align:center;
}
.pop1 {
	left:2.2rem;
	bottom:3.6rem;
	@include delay(.5s)
}
.pop2 {
	left:3.68rem;
	bottom:3.32rem;
	@include delay(.6s)
}
.pop3 {
	right:3.1rem;
	bottom:3.65rem;
	@include delay(.7s)
}
.pop4 {
	right:1.4rem;
	bottom:3.24rem;
	@include delay(.8s)
}
.plane {
	position:absolute;
	right:3.44rem;
	bottom:7.2rem;
	z-index:5;
	width:5.44rem;
	height:1.33rem;
	background-image:url('../images/p_03.png')
}
.contrail {
	position:absolute;
	right:3.02rem;
	bottom:3.5rem;
	z-index:1;
	width:5.44rem;
	height:3.97rem;
	background-image:url('../images/contrail.png')
}
#page2 {
	background:url('../images/bottom_02.png') center bottom no-repeat;
	background-size:100%;
}
.page2-wrapper {
	position:absolute;
	top:50%;
	left:50%;
	width:11.7rem;
	height:5.5rem;
	margin-top:-2.27rem;
	margin-left:-5.85rem;
	background:#2b95b1;
	border-radius:.16rem;
}
.page2-wrapper .title {
	line-height:.99rem;
	padding-top:.99rem;
	margin:0 .1rem;
	font-size:.6rem;
	color:#fff;
	border-bottom:solid 1px #ffe887;
	text-indent:1.32rem;
}
.page2-wrapper .title::before, .page2-wrapper .title::after {
	content:'';
	position:absolute;
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
}
.page2-wrapper .title::before {
	width:1.64rem;
	height:1.21rem;
	left:-.1rem;
	top:-.01rem;
	background-image:url('../images/page_coner.png')
}
.page2-wrapper .title::after {
	width:3.77rem;
	height:2.45rem;
	right:-.1rem;
	top:-.97rem;
	background-image:url('../images/p_09.png')
}
.page2-wrapper .txt {
	line-height:.3rem;
	padding:0 .6rem;
	color:#fff;
	font-size:.18rem;
}
.page2-wrapper p:nth-of-type(2), .page2-wrapper p:nth-of-type(5) {
	padding-top:.5rem;
}
#page2 .city01 {
	left:auto;
	right:2.75rem;
	@include delay(.4s)
}
#page2 .city02 {
	left:auto;
	right:1.67rem;
	@include delay(.25s)
}
#page2 .city03 {
	left:auto;
	right:1.14rem;
	@include delay(.15s)
}
#page2 .city04 {
	left:auto;
	right:.3rem;
	@include delay(.1s)
}
#page2 .cloud01 {
	left:auto;
	right:1.74rem;
	@include delay(.35s)
}
#page2 .cloud02 {
	left:auto;
	right:.71rem;
	@include delay(.2s)
}
#page2 .cloud03 {
	left:auto;
	right:1.33rem;
	@include delay(.3s)
}
#page2 .cloud04 {
	left:auto;
	right:-.28rem;
	@include delay(.05s)
}
.page2-wrapper {
	@include delay(.05s)
}
.page2-wrapper p:nth-child(1) {
	@include delay(.2s)
}
.page2-wrapper p:nth-child(2) {
	@include delay(.25s)
}
.page2-wrapper p:nth-child(3) {
	@include delay(.3s)
}
.page2-wrapper p:nth-child(4) {
	@include delay(.35s)
}
.page2-wrapper p:nth-child(5) {
	@include delay(.4s)
}

#page3 .page3-wrapper, #page4 .page4-wrapper {
	position:absolute;
	width:11.3rem;
	height:8.57rem;
	left:50%;
	top:50%;
	margin:-5.65rem;
	margin-top:-3.65rem;
}
.subtitle {
	position:relative;
	width:3.04rem;
	line-height:.63rem;
	margin-top:.7rem;
	font-size:.4rem;
	color:#fff;
	background:#e9b92a;
	text-align:center;
	border-radius:.3rem;
}
.subtitle::before {
	content:'';
	position:absolute;
	top:-.01rem;
	left:-.22rem;
	width:.71rem;
	height:.67rem;
	background:url('../images/p_star02.png') center no-repeat;
	background-size:100%;
}
#page3 ul, #page4 ul {
	margin-top:.21rem;
	padding-top:.9rem;
	border-top:solid 1px #ffe887;
}
#page3 li {
	position:relative;
	float:left;
	width:33.333%;
}
#page3 .list01 figure {
	height:1.8rem;
	margin:0 .25rem;
	background:#fff;
	border-radius:.16rem;
}
#page3 .list01 figcaption {
	line-height:.24rem;
	padding:.32rem .24rem 0;
 	font-size:.18rem;
 	color:#93690e;
}
#page3 .list01 li:nth-of-type(1) {
  	text-align:center;
}
#page3 .list01 li:nth-of-type(1) img {
 	width:1.2rem;
 	height:1.2rem;
}
#page3 .list01 li:nth-of-type(2) img {
	margin-top:.2rem;
}
#page3 .list01 li:nth-of-type(3) figcaption {
	padding-top:.7rem
}
#page3 .list01 span {
	position:absolute;
	left:50%;
	top:-.46rem;
	width:.72rem;
	line-height:.72rem;
	margin-left:-.36rem;
	color:#e9b92a;
	font-size:.56rem;
	color:#e9b92a;
	background:#f7e9ad;
	border-radius:100%;
	text-align:center;
	font-weight:bold;
}
.subtitle:nth-of-type(1) {
	@include delay(.05s)
}
.subtitle:nth-of-type(2) {
	@include delay(.25s)
}
.subtitle:nth-of-type(3) {
	@include delay(.05s)
}

.list01 li:nth-child(1) {
	@include delay(.5s)
}
.list01 li:nth-child(2) {
	@include delay(.3s)
}
.list01 li:nth-child(3) {
	@include delay(.35s)
}

.list02 li:nth-child(1) {
	@include delay(.55s)
}
.list02 li:nth-child(2) {
	@include delay(.6s)
}
.list02 li:nth-child(3) {
	@include delay(.65s)
}
.list02 li:nth-child(4) {
	@include delay(.7s)
}
#page3 .list02 li {
	width:25%;
	line-height:.34rem;
	padding-top:.2rem;
	border-top:solid 4px #fff;
	color:#93690e;
	text-align:center;
}
#page3 .list02 p:first-child {
	font-size:.2rem;
}
#page3 .list02 p:last-child {
	font-size:.14rem;
}
#page3 .list02 li::before {
	content:'';
	position:absolute;
	top:-.14rem;
	left:50%;
	width:.24rem;
	height:.24rem;
	margin-left:-.12rem;
	border-radius:100%;
	background:#fff;
}
#page3 .list02 li:first-child::after, #page3 .list02 li:last-child::after {
	content:'';
	position:absolute;
	top:-.04rem;
	width:50%;
	height:.04rem;
	background:#f2d455;
}
#page3 .list02 li:first-child::after {
	left:-.12rem;
}
#page3 .list02 li:last-child::after {
	right:-.12rem;
}
#page3 .city05 {
	right:.28rem;
	bottom:.33rem;
	@include delay(.05s)
}
#page3 .city07 {
	right:1.22rem;
	bottom:.73rem;
	@include delay(.1s)
}
#page3 .city08 {
	right:.5rem;
	bottom:.28rem;
	@include delay(.15s)
}
#page3 .cloud05 {
	right:2.46rem;
	bottom:.12rem;
	@include delay(.2s)
}
#page4 {
	background:url('../images/bottom_01.png') center bottom no-repeat;
	background-size:100%;
	@include delay(.05s)
}
#page4 ul {
	padding-left:1.15rem;
}
#page4 li {
	line-height:.3rem;
	font-size:.14rem;
	color:#93690e;
}
#page4 li:nth-child(1) {
	@include delay(.05s)
}
#page4 li:nth-child(2) {
	@include delay(.15s)
}
#page4 li:nth-child(3) {
	@include delay(.2s)
}
#page4 li:nth-child(4) {
	@include delay(.25s)
}
#page4 li:nth-child(5) {
	@include delay(.3s)
}
#page4 li:nth-child(6) {
	@include delay(.35s)
}
#page4 li:nth-child(7) {
	@include delay(.4s)
}
#page4 li:nth-child(8) {
	@include delay(.45s)
}
#page4 li:nth-child(9) {
	@include delay(.5s)
}
#page4 .page4-wrapper {
	height:5.15rem;
	top:1rem;
	margin-top:0;
}
#page4 .city10 {
	bottom:.29rem;
	right:5.26rem;
}
#page4 .city11 {
	bottom:.39rem;
	right:4.17rem;
}
#page4 .cloud05 {
	bottom:-.07rem;
	right:4.17rem;
}
#signup-container {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:55;
	background:#2b95b1;
	overflow:auto;
}
.signup-wrapper {
	width:7.1rem;
	margin:0 auto 1.3rem;
}
.site-content {
	position:relative;
}
#close {
	position:absolute;
	right:0;
	top:-.55rem;
	width:.55rem;
	height:.55rem;
	border-top-left-radius:.14rem;
	border-top-right-radius:.14rem;
	background:#ddd;
}
#close:before, #close:after {
	content:'';
	position:absolute;
	top:.25rem;
	left:.1rem;
	width:.37rem;
	height:.03rem;
	background:#646464;
}
#close:before {
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
#close:after {
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}
#success {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-2.03rem;
	margin-top:-2.5rem;
	width:4.06rem;
	height:5rem;
	background:url('../images/success.png') center no-repeat;
	background-size:100%;
}